<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../org/angular.min.js"></script>
    <script src="../../org/jquery.min.js"></script>
</head>

<body ng-app="app" ng-controller="ctrl">
    <yu-tab data="sport"></yu-tab>
    <!-- 如果要使用组件自己定义的默认值，那么data参数也要写，写一个父级作用域不存在的变量即可 -->
    <yu-tab data="data"></yu-tab>
    <script>
        var m = angular.module('app', []);
        m.controller('ctrl', ['$scope', function($scope) {
            $scope.sport = [{
                    title: 'NBA',
                    content: 'NBA内容'
                },
                {
                    title: '台球',
                    content: '台球内容'
                },
                {
                    title: '网球',
                    content: '网球内容'
                }, {
                    title: '羽毛球',
                    content: '羽毛球内容'
                }
            ]
        }])
        m.directive('yuTab', [function() {
            return {
                restrict: 'E',
                templateUrl: './view/tab.html',
                controller: ['$scope', function($scope) {

                    var data = [{
                            title: '首页',
                            content: '首页内容'
                        },
                        {
                            title: '电影',
                            content: '电影内容'
                        },
                        {
                            title: '小说',
                            content: '小说内容'
                        }
                    ]
                    console.log($scope.data);
                    $scope.data = $scope.data || data;
                }],
                scope: {
                    data: '='
                },
                link: function(scope, elem, attr) {
                    $(elem).on('click', 'li', function() {
                        var index = $(this).index();
                        $(this).addClass('active').siblings('li').removeClass('active');
                        $(elem).find('.content-wrapper div').eq(index).addClass('active').siblings('div').removeClass('active');
                    })
                }
            }
        }])
    </script>
</body>

</html>
